<template>
    <div>
        <!-- 表格 -->
        <el-table :data="songsMessage" stripe style="width: 100%">
            <el-table-column type="index" label="序号" width="60" align="center" header-align="center" />
            <el-table-column width="160" label="喜欢/下载" align="center">
                <template #default="{ row }">
                    <el-icon size="18px" @click=" addLikeOrNot(row.id)"  >
                            <!-- :color="`${musicid}`==row.id?'red':''" -->
                        <svg t="1682004982466" 
                            class="icon" 
                            viewBox="0 0 1024 1024" 
                            version="1.1" 
                            xmlns="http://www.w3.org/2000/svg" 
                            p-id="2625" 
                            width="200" 
                            height="200"
                            @click="$event.target.style.color=`${svgColor}`"
                            :color="row.likeFlag?'red':''"
                        >
                            <path  d="M667.786667 117.333333C832.864 117.333333 938.666667 249.706667 938.666667 427.861333c0 138.250667-125.098667 290.506667-371.573334 461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 608.170667 117.333333 667.786667 117.333333z"  p-id="2626">
                            </path>
                        </svg>
                    </el-icon>
                    <el-icon size="18px" style="margin-left: 5px;">
                        <Download />
                    </el-icon>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="歌曲名称" width="240"></el-table-column>
            <el-table-column label="歌手" width="240">
                <template #default="{ row }">
                    <p>{{ row.ar[0].name }}</p>
                </template>
            </el-table-column>
            <el-table-column label="专辑" width="240">
                <template #default="{ row }">
                    <span>{{ row.al.name }}</span>
                    <span class="alia">{{ row.al.tns[0] }} {{ row.alia[0] }}</span>
                </template>
            </el-table-column>
            <el-table-column label="时长" align="center">
                <template #default="{ row }">
                    <span>{{ timestampToTime(row.dt).slice(14, 19) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="播放" align="center">
                <template #default="{ row }">
                    <el-icon @click="songPlay(row)" size="25px" class="addSongPlaybtn">
                        <CirclePlusFilled />
                    </el-icon>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getTagsOfMusics } from "@/api/topic"
import { songUrlInterface, lyricsInterface, userLikesListInterface, likeInterface } from "@/api/artist"
import { searchInterface } from "@/api/search"
import { timestampToTime } from '../../utils/date'
import {  Download, CirclePlusFilled } from '@element-plus/icons-vue'
import { mapMutations, mapState } from 'vuex'
import { getUserSongsListInterface } from '@/api/user'

export default {
    components: {
        Download,
        CirclePlusFilled
    },
    data() {
        return {
            songsMessage: [],  //存放所点击的歌单下的所有歌曲信息
            timestampToTime: '', //接收外界引入的方法
            childMessage: '' ,   // 传递给父组件的数据
            svgColor:"", //喜欢歌曲图标的颜色
            userLikesList:[], //用户喜欢歌曲的列表
        }
    },
    // 接收父组件传递下来的flag，用于控制搜索框的显示
    props: ["flag", "inputValue", "optionsValue", "searchFlag"],
    computed: {
        ...mapState('playListModule', ['playSongId', 'songInfo', 'playStatus', 'songDetails', 'audioInfo', 'lyric']),
        ...mapState('userInfoModule', ['userInfo']),
    },
    created() {
        // 获取用户喜欢歌曲的列表
       userLikesListInterface().then( res => {
            console.log("用户喜欢列表",res.ids);
            this.userLikesList = res.ids;
        }),
        // 获取到用户的歌单列表
        getUserSongsListInterface({ uid: this.userInfo.userId }).then(res => {
            // 将用户歌单id 与 songListId 进行搜索判断songListId 是否存在于用户歌单id 中，并将判断结果赋值给要传递给父组件的数据childMessage
           this.childMessage = res.playlist.some(item => {
                return  item.id === JSON.parse (localStorage.getItem(`songListId`))
            })
            // console.log(this.childMessage);
            //  子父通信
            this.$emit('changeMessage', this.childMessage)
        })
        // 触发改变父元素flag的方法,组件创建时将flag改为true
        this.$emit('changeinput');

        // 调用接口获取当前歌单中每首歌的详情
        // 为了解决该页面发生刷新时this.musicId是undefined，此时可从本地存储中获取用户点击的歌单的id
        getTagsOfMusics({ id: localStorage.getItem("songListId") }).then(res => {
            this.songsMessage = res.songs;
            // 遍历当前页面下所有歌曲，获取每首歌曲的id
            this.songsMessage.forEach(item=>{
                // 遍历用户喜欢列表下的所有歌曲的id
                this.userLikesList.forEach(likeid=>{
                    // 如果当前歌曲在“我喜欢歌曲”列表中存在，则给当前歌曲的信息中添加一个key：likeFlag，值为“true”
                    if(item.id === likeid){
                        item.likeFlag = true;
                    }
                })
            })
            // console.log('0----->',this.songsMessage)
        }),
        this.timestampToTime = timestampToTime; //接收外界引入的方法
    },
    beforeUnmount() {
        // 触发改变父元素flag的方法,组件销毁时将flag改为false
        this.$emit('changeinput');
    },
    watch: {
        // 监听用户是否已点击搜索按钮
        searchFlag() {
            // 判断是否选择了类型，如果没有选择类型，默认选择“歌曲”
            if (this.optionsValue) {
                // 调用搜索的接口
                searchInterface({ type: `1`, keywords: `${this.inputValue}` })
                    .then(res => { this.songsMessage=res.result.songs; })
                // 调用完接口获取到数据后将input内的内容清空
                this.$emit('changeInputValue');
            }
            else{
                // 调用搜索的接口
                searchInterface({ type: `${this.optionsValue}`, keywords: `${this.inputValue}` })
                    .then(res => { this.songsMessage=res.result.songs; })
                // 调用完接口获取到数据后将input内的内容清空
                this.$emit('changeInputValue');
            }
        }
    },
    methods: {
        ...mapMutations('playListModule', ['SET_PLAY_SONG_ID', 'SET_SONG_INFO', 'SET_PLAY_STATUS', 'SET_PLAY_DETAILS', 'SET_AUDIO_INFO', 'SET_LYRIC']),
        async getAudioInfo(id) {
            // 调用接口获取歌曲的url
            await songUrlInterface({ id: this.playSongId, level: 'standard' }).then(async (res) => {
                await lyricsInterface({ id }).then(res => {
                    this.SET_LYRIC(res.lrc.lyric)
                    this.audioInfo.lrc = res.lrc.lyric
                })
                this.SET_AUDIO_INFO({
                    // 歌曲id
                    id,
                    // 歌名
                    name: this.songInfo.name || '',
                    //  作者名
                    artist: this.songInfo.ar?.[0].name || '',
                    // 音乐地址
                    url: res?.data?.[0].url,
                    // 音乐封面
                    cover: this.songInfo.al.picUrl || '',
                    // 歌词
                    lrc: this.lyric || ''
                })
            })
        },
        // 播放歌曲
        songPlay(row) {
            this.SET_PLAY_SONG_ID(row.id);
            // console.log(row.id)
            this.SET_SONG_INFO(row);
            this.SET_PLAY_STATUS(true);
            this.getAudioInfo(row.id);
        },
        // 喜欢或取消喜欢
        // addLikeOrNot(musicId){
        //     // this.isLike =!this.isLike;
        //     //调用接口获取用户喜欢的歌曲列表
        //     userLikesListInterface().then( res => {
        //         this.userLikesList=res.ids;
        //         // 如果喜欢的列表中存在这首歌，这将this.isLike修改为
        //         // console.log("我喜欢列表中的数据",res.ids);
        //         this.songsMessage.forEach(item=>{
        //                 // 遍历用户喜欢列表下的所有歌曲的id
        //                 this.userLikesList.forEach(likeid=>{
        //                     // 如果当前歌曲在“我喜欢歌曲”列表中存在，则给当前歌曲的信息中添加一个key：likeFlag，值为“true”
        //                     if (item.id === likeid) {
        //                         // 取消喜欢：将“爱心”上的颜色移除
        //                         item.likeFlag = false;
        //                         // 调用接口添加喜欢或取消喜欢
        //                         likeInterface({ id: musicId, like: false }).then(() => {
        //                             ElMessage({
        //                                 message: '已从喜欢列表中移除',
        //                                 type: 'warning',
        //                             })
        //                         })
        //                     }
        //                     else{
        //                         item.likeFlag = true;
        //                         likeInterface({id:musicId,like:true}).then(()=>{
        //                             // 添加喜欢：将“爱心”上的颜色变为红色
        //                             ElMessage({
        //                                 message: '已添加至喜欢列表中',
        //                                 type: 'success',
        //                             })
        //                         })
        //                     }
        //                 })
        //             })
        //         // if(res.ids.includes(musicId)){
        //         //     // $ref获取不到DOM元素
        //         //     // console.log(this.$refs.RefStar);
        //         //     // // this.$refs.RefStar.style.background-color="blue";
                    
        //         //     // 调用接口添加喜欢或取消喜欢
        //         //     likeInterface({id:musicId,like:false}).then(()=>{
        //         //         // 取消喜欢：将“爱心”上的颜色移除
                        
        //         //         this.songsMessage.forEach(item=>{
        //         //             item.likeFlag = false;
        //         //         })
        //         //         ElMessage({
        //         //             message: '已从喜欢列表中移除',
        //         //             type: 'warning',
        //         //         })
        //         //     })
        //         // }
        //         // else(
        //         //      likeInterface({id:musicId,like:true}).then(()=>{
        //         //         // 添加喜欢：将“爱心”上的颜色变为红色
        //         //         this.songsMessage.forEach(item=>{
        //         //             item.likeFlag = true;
        //         //         })
        //         //         ElMessage({
        //         //             message: '已添加至喜欢列表中',
        //         //             type: 'success',
        //         //         })
        //         //     })
        //         // )
        //     })
        // }
    }
}
</script>

<style lang="scss" scoped>
svg{
    cursor: pointer;
}
svg:hover{
    color: red;
}
.addSongPlaybtn{
    cursor: pointer;
}
.addSongPlaybtn:hover{
    color: skyblue;
}
</style>